<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>世界盃點球大作戰</title>
    <meta property="og:title" content="世界盃點球大作戰">
    <meta property="og:url" content="http://innovation.wenweipo.com/world_cup_shot_game/">
    <meta property="og:type" content="website">
    <meta property="og:description" content="為你中意的球隊進粒球吧！">
    <meta property="og:image" content="http://innovation.wenweipo.com/world_cup_shot_game/img/fb_cover.jpg">
    <meta name="keywords" content="世界盃點球大作戰">
    <meta name="description" content="為你中意的球隊進粒球吧！">
	<link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="stylesheet" href="./css/animation.css">
    <link rel="stylesheet" href="./css/index.css?ver=1.3">
    <script src="js/utils.js?ver=1.3"></script>
    <script src="js/index.js?ver=1.5"></script>
</head>
<body>
<div class="cover"><img src="img/cover.jpg" alt="logo"></div>
<div class="layout">
    <div class="scene scene-1">
        <div class="bg101"></div>
        <div class="bg102"></div>
        <div class="pos1">
            <img class="ball1" src="img/ball.png" alt="">
            <img class="p104" src="img/p104.png" alt="">
            <img id="btn101" class="p103" src="img/p103.png" alt="">
        </div>
        <div class="copy">
            香港大公文匯傳媒集團 <br>
            技術創新融媒體工作室出品
        </div>
        <div id="teams-select" class="teams-select">
            <img class="teams-title" src="img/teams-title.png" alt="">
            <div class="teams-note">下滑選擇更多球隊</div>
            <div id="teams-list" class="teams-list"></div>
            <img id="start-btn" class="start-btn" src="img/start.png" alt="">
        </div>
    </div>
    <div class="scene scene-2">
        <div class="score201">得分 <b id="score201"></b></div>
        <div class="clock201">倒計時 <b id="clock201"></b></div>
        <img class="goalie goalie201" src="img/goalie01.png" alt="">
        <img class="goalie goalie202" src="img/goalie02.png" alt="">
        <img class="goalie goalie203 jump-stat" src="img/goalie03.png" alt="">
        <img id="ball201" class="ball201" src="img/ball.png" alt="">
        <img id="steer" class="steer" src="img/steer.png" alt="">
        <img id="pointer201" class="pointer201" src="img/pointer.png" alt="">
        <div id="goal201" class="goal201"></div>
        <canvas id="cv"></canvas>
        <div id="rules" class="rules mask">
            <div class="rules-inner">
                <img class="rules-img" src="img/rules.png" alt="">
                <div class="rules-close close"></div>
                <div class="rules-content">
                    手指觸球，顯示方向標，手指快速劃出，球即被踢出，劃出速度越快，球將飛得越遠，球最後停在球門區域，並且未碰守門員，則進球得分。
                </div>
            </div>
        </div>
        <img id="show-rules" class="show-rules" src="img/show-rules.png" alt="">
    </div>
    <div class="scene scene-3">
        <div class="result">
            <img class="result-fail" src="img/fail.png" alt="">
            <div class="result-success">
                <img class="result-success-img" src="img/success.png" alt="">
                <div class="result-success-msg">
                    你為<span class="result-team"></span><br>
                    貢獻了<span class="result-score"></span>球
                </div>
            </div>
            <div class="current-rank">球隊排名：<span class="current-rank-num"></span></div>
        </div>
        <img class="rank-btn" src="img/rank-btn.png" alt="">
        <img class="again" src="img/again.png" alt="">
        <img class="share" src="img/share.png" alt="">

        <div id="rank-box" class="rank-box mask">
            <div class="rank-inner">
                <img class="rank-bg" src="img/rank-bg.png" alt="">
                <div class="rank-close close"></div>
                <div id="rank-list" class="rank-list"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>